<template>
  <div class="box4" ref="charts">

  </div>
  
</template>

<script setup lang="ts" >
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import chinaJson  from './china.json'


let charts = ref();
echarts.registerMap('china', chinaJson as any)

onMounted(() => {
  let mycharts = echarts.init(charts.value);
  let option = {
    geo: {
      map: 'china',
      roam: false,
      top: 180,
      zoom: 1.4,
      label: {
        show: true,
        color: '#fff',
        fontSize: 14,
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#326BD9', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#11144E', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },

        borderColor: '#00E4FF',
        borderWidth: 1.2,
        opacity: 0.8,
        shadowColor: `#326BD9`, // 阴影颜色
        shadowBlur: 50,
      },
      emphasis: {
        itemStyle: {
          areaColor: '#3595d6',
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 20,
        },
      },
    },
    series: [
      {
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          color: '#fff',
          symbolSize: 20,
          symbol: 'path://M614.8 142.5v198l325.6 193.1c11.9 7.1 19.2 19.9 19.2 33.7v74.5c0 24.4-22 42.8-46 38.6l-307.5-52.7 10.9 187 117.5 80.5v89.6c0 26.3-25.4 45.1-50.6 37.4l-173.5-53.1-172.3 53c-25.2 7.7-50.7-11.1-50.7-37.4v-89.5l117.5-80.5 10.9-187.1-305.3 52.7c-24 4.3-46.1-14.2-46.1-38.5v-74.6c0-13.8 7.3-26.6 19.1-33.6L407 340.5v-198C407 78.3 485.9 0 510.4 0c24.4 0 104.4 76.1 104.4 142.5z',
        },
        lineStyle: {
          color: '#fff',
          width: 2,
          opacity: 0.5,
          type: 'dashed',
          curveness: 0.2,
        },
        data: [
          {
            fromName: '北京',
            toName: '上海',
            coords: [
              [116.405285, 39.904989],
              [121.473701, 31.230416],
            ],
          },
          {
            fromName: '上海',
            toName: '北京',
            coords: [
              [121.473701, 31.230416],
              [116.405285, 39.904989],
            ],
          },
          {
            fromName: '北京',
            toName: '湖北',
            coords: [
              [116.405285, 39.904989],
              [114.298572, 30.584355],
            ],
          },
          {
            fromName: '湖北',
            toName: '北京',
            coords: [
              [114.298572, 30.584355],
              [116.405285, 39.904989],
            ],
          },
          {
            fromName: '北京',
            toName: '新疆',
            coords: [
              [116.405285, 39.904989],
              [87.617733, 43.792818],
            ],
          },
          {
            fromName: '四川',
            toName: '北京',
            coords: [
              [104.065735, 30.659462],
              [116.405285, 39.904989],
            ],
          },
          {
            fromName: '北京',
            toName: '黑龙江',
            coords: [
              [116.405285, 39.904989],
              [126.642464, 45.756967],
            ],
          },
        ],
      },
    ],
  };
  mycharts.setOption(option);
});
</script>

<style lang="less" scoped>
.box4{
  width: 100%;
  height: 100%;
}
</style>
